<template>
  <div class="home">
    <div class="box">
      <div class="lists" v-for="(x, i) in hb" :key="i">
        <h3 class="title">{{ x.name }}</h3>
        <span @click="jinru(x.kindId)" class="jr">进入场景</span>
        <div @click="xq(c.designTemplateId)" class="list" v-for="(c, i) in x.templates" :key="i">
          <img class="ig" :src="c.designTemplateImageUrl" alt="" />
        </div>
        <button class="gd">更多</button>
        <button class="hyp">换一批</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hb: [],
      page: 2,
    };
  },
  mounted(){
    window.addEventListener('scroll', () => {
            let scrollY = document.documentElement.scrollTop || document.body.scrollTop
            let vh = document.compatMode === 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight 
            let allHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) 
            scrollY=Math.ceil (scrollY)
            if (scrollY + vh >= allHeight) {
                this.ons()
            }
        })
  },
  created() {
    this.fb();
  },
  methods: {
    fb() {
      this.$http
        .get(
          "/api/mobile/main/getMainMiniProgramHomeInfo.do?_dataType=json&_dataClientType=3&client_type=40&business_type=1%2C2%2C3"
        )
        .then((res) => {
          this.hb = res.data.body.data.sceneDetails.sceneDetail;
          console.log(this.hb);
        });
    },
    ons(){
        this.$http
        .get(
          `/api/mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&client_type=40&page_no=${this.page}&business_type=1%2C2%2C3`
        )
        .then((res) => {
            if(this.page<10){
                this.hb = this.hb.concat(res.data.body.data.sceneDetail);
                this.page++
            }
        });
    },
    jinru(x){
      console.log(x);
      this.$router.push({
                path:'/room',
                query:{
                    id:x
                }
            })
    },
    xq(c){
      this.$router.push({
                path:'/xq',
                query:{
                    id:c
                }
            })
    }
  },
};
</script>

<style scoped>
.title {
  height: 1.1rem;
  font-size: 0.36rem;
  line-height: 1.1rem;
  flex: 1;
  min-width: calc((100%) / 2);
  max-width: calc((100%) / 2);
}
.jr {
  right: 0.2rem;
  font-size: 0.25rem;
  color: rgba(0, 0, 0, 0.6);
  flex: 1;
  min-width: calc((100%) / 2);
  max-width: calc((100%) / 2);
  line-height: 1.1rem;
  text-align: right;
}
.lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 0.24rem;
}
.list {
  display: inline-block;
  flex: 1;
  min-width: calc((100%) / 3);
  max-width: calc((100%) / 3);
  text-align: center;
}
.ig {
  width: 2.169rem;
}
.gd {
  margin-right: 0.22rem;
}
.gd,
.hyp {
  height: 0.8rem;
  border-radius: 0.8rem;
  background-color: #f3f4f9;
  border: none;
  min-width: calc((100%) / 2.08);
  max-width: calc((100%) / 2.08);
}
</style>